<template>
  <div class="app-hot-tag">
    <app-detail-title></app-detail-title>
    <div class="content">
      <nuxt-link to='/' class="default">分数线</nuxt-link>
      <nuxt-link to='/' class="error">分线</nuxt-link>
      <nuxt-link to='/' class="success">分数线分数线分数线</nuxt-link>
      <nuxt-link to='/' class="warn">分数线</nuxt-link>
    </div>
  </div>
</template>

<script>
import appDetailTitle from './app-detail-title.vue'
export default{
  components:{
    appDetailTitle
  }
}
</script>

<style lang="scss" scoped="scoped">
.app-hot-tag{
  background-color: white;
}
.content{
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  a{
    box-sizing: border-box;
    padding: 3px 10px;
    font-size: 13px;
    border-radius: 2px;
    margin-right: 5px;
    margin-bottom: 5px;
    transition: all 0.3s;
    &.default{
      background-color: #ECF5FF;
      border: 1px solid #B3D8FF;
      color: #409EFF;
      &:hover{
        background-color: #409EFF;
        color: white;
      }
    }
    &.error{
      background-color: #FEF0F0;
      border: 1px solid #FBC4C4;
      color: #F56C6C;
      &:hover{
        background-color: #F56C6C;
        color: white;
      }
    }
    &.success{
      background-color: #F0F9EB;
      border: 1px solid #C2E7B0;
      color: #67C23A;
      &:hover{
        background-color: #67C23A;
        color: white;
      }
    }
    &.warn{
      background-color: #FDF6EC;
      border: 1px solid #F5DAB1;
      color: #E6A23C;
      &:hover{
        background-color: #E6A23C;
        color: white;
      }
    }
  }
}
</style>
